import React from "react";
import {Actionsheet, Box, Button, Center, Text, useDisclose} from "native-base";
import {StyleSheet} from 'react-native';

export const SearchYear = ({setTime, _searchPressingEnter}) => {
    const {
        isOpen,
        onOpen,
        onClose
    } = useDisclose();
    const time = ['全部', '战国', '秦代', '汉代', '新莽', '魏晋', '隋代', '唐代', '宋代', '其他']
    function selectTime(time){
        console.log(time);
        setTime(time);
        _searchPressingEnter();
        onClose();
    }
    return (
        // 细分年代(战国-元)
        <Button
            onPress={onOpen}
            style={styles.otherSearch}
            shadow={2}>
            <Center
                _text={{fontWeight: 'bold', color: '#1eb566', fontsize: 20}}
                style={styles.search}>
                细分年代(战国-元)
            </Center>
            <Actionsheet isOpen={isOpen} onClose={onClose}>
                <Actionsheet.Content>
                    {
                        time.map((item,index)=>{
                            return <Actionsheet.Item key={index} onPress={()=>{selectTime(item)}}>{item}</Actionsheet.Item>
                        })
                    }
                </Actionsheet.Content>
            </Actionsheet>
        </Button>
    )
}

const styles = StyleSheet.create({
    otherSearch: {
        width: '100%',
        height: 50,
        backgroundColor: '#f2f2f2',
        marginBottom: 10,
        borderRadius: 5,
    },
    search: {
        width: '100%',
        height: '100%',
        fontWeight: 'bold',
        fontsize: 30,
    },
})